{% extends 'generic/object_retrieve.html' %}
{% load helpers %}

{% block content_left_page %}
    <div class="card">
        <div class="card-header">
            <strong>Cable</strong>
        </div>
        <table class="table table-hover card-body attr-table">
            <tr>
                <td>Type</td>
                <td>{{ object.get_type_display|placeholder }}</td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    {{ object.status| hyperlinked_object_with_color }}
                </td>
            </tr>
            <tr>
                <td>Label</td>
                <td>{{ object.label|placeholder }}</td>
            </tr>
            <tr>
                <td>Color</td>
                <td>
                    {% if object.color %}
                        <span class="label nb-color-block" style="background-color: #{{ object.color }}">&nbsp;</span>
                    {% else %}
                        <span class="text-secondary">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>Length</td>
                <td>
                    {% if object.length %}
                        {{ object.length }} {{ object.get_length_unit_display }}
                    {% else %}
                        <span class="text-secondary">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>
{% endblock content_left_page %}

{% block content_right_page %}
    <div class="card">
        <div class="card-header">
            <strong>Termination A</strong>
        </div>
        {% include 'dcim/inc/cable_termination.html' with termination=object.termination_a %}
    </div>
    <div class="card">
        <div class="card-header">
            <strong>Termination B</strong>
        </div>
        {% include 'dcim/inc/cable_termination.html' with termination=object.termination_b %}
    </div>
{% endblock content_right_page %}
